<template>
  <div id="margins">
    <el-descriptions title="用户信息" direction="vertical" :column="4" border>
      <el-descriptions-item label="用户名(手机号)">{{
        information.account
      }}</el-descriptions-item>
      <el-descriptions-item label="居住地" :span="2">{{
        information.area
      }}</el-descriptions-item>
      <el-descriptions-item label="姓名">{{
        information.name
      }}</el-descriptions-item>
      <el-descriptions-item label="性别">{{
        information.gender
      }}</el-descriptions-item>
      <el-descriptions-item label="联系地址">{{
        information.address
      }}</el-descriptions-item>
    </el-descriptions>
    <el-button type="text" @click="dialogFormVisible = true"
      >修改个人信息</el-button
    >

    <el-dialog
      title="个人信息"
      :visible.sync="dialogFormVisible"
      @close="closedialog"
    >
      <div id="usending">
        <el-form :model="information">
          <el-form-item label="用户名" :label-width="formLabelWidth">
            <el-input
              style="width: 300px"
              v-model="information.account"
              autocomplete="off"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input
              v-model="information.name"
              autocomplete="off"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-radio v-model="information.gender" label="男">男</el-radio>
            <el-radio v-model="information.gender" label="女">女</el-radio>
          </el-form-item>
          <el-form-item label="居住地" :label-width="formLabelWidth">
            <el-input
              v-model="information.area"
              autocomplete="off"
              style="width: 300px"
              @focus="dialogVisible = true"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系地址" :label-width="formLabelWidth">
            <el-input
              v-model="information.address"
              autocomplete="off"
              style="width: 300px"
              @focus="dialogVisible = true"
            ></el-input>

            <el-dialog
              title="定位"
              :visible.sync="dialogVisible"
              width="50%"
              append-to-body
            >
              <dialog-map @addresschange="addresschange" />
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false"
                  >确 定</el-button
                >
              </span>
            </el-dialog>
          </el-form-item>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateInfo()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { PersonInfoAPI } from "@/request/api";
import { UpdateInfo } from "@/request/api";
import DialogMap from "./DialogMap.vue";
export default {
  components: { DialogMap },
  inject: ["reload"],
  data() {
    return {
      information: {
        account: "",
        gender: "男",
        area: "",
        name: "",
        address: "",
        avatar: "",
        lng:"",
        lat:""
      },
      dialogFormVisible: false,
      formLabelWidth: "100px",
      options: [],
      area1: [],
      dialogVisible: false,
    };
  },
  created() {
    PersonInfoAPI().then((res) => {
      this.information = res.data.data;
    });
  },
  methods: {
    addresschange(value1, value2,value3,value4) {
      this.information.address = value1;
      this.information.area = value2;
      this.information.lng=value3
      this.information.lat=value4

    },
    closedialog() {
      this.reload();
    },
    updateInfo() {
      this.dialogFormVisible = false;
      UpdateInfo(this.information).then((res) => {
        console.log(res.data);
      });
    },
  },
};
</script>
<style>
#margins {
  width: 80%;

  margin: 0 auto;
}
</style>